<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <title>Approval</title>

    <script src="data.js"></script>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
</head>
<body>

<div class="ui segment">
    <h1 class="ui center aligned header">Plan Approval</h1>
</div>

<div id="container">
    <script id="formTemplate" type="text/x-handlebars-template">
        <div class="ui text container">
            <div class="ui segment">
                {{#if success}}
                <h3 id="success" class="ui header">Success</h3>
                <a href="/#/process/{{values.processId}}">Go to the process page</a>
                {{else}}

                <!-- multipart/form-data is required for uploading files -->
                <form class="ui form {{#if errors}}error{{/if}}" method="post" enctype="multipart/form-data"
                      action="{{submitUrl}}">

                    {{#if errors}}
                    <div class="ui error message">
                        <ul class='list'>
                            {{#each errors}}
                            <li>{{this}}</li>
                            {{/each}}
                        </ul>
                    </div>
                    {{/if}}

                    <div class="field">
                        <textarea rows="20" style="font-family: monospace">{{values.plan}}</textarea>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input id="approved" type="checkbox" name="approved" value="{{values.approved}}">
                            <label for="approved">Approve</label>
                        </div>
                    </div>

                    <button class="ui primary button" type="submit" onclick="handleSubmit(event)">Submit</button>
                </form>
                {{/if}}
            </div>
        </div>
    </script>
</div>

<script>
    function handleSubmit(ev) {
        var button = ev.target;
        var form = button.parentElement;
        form.classList.add("loading");
    }

    var source = document.getElementById("formTemplate").innerHTML;
    var template = Handlebars.compile(source);
    var html = template(data);

    document.getElementById("container").innerHTML = html;

    $('.ui.dropdown').dropdown();
</script>

</body>
</html>